// web fonts
@import url("http://fonts.googleapis.com/css?family=Merriweather:700,300");
@import url("http://fonts.googleapis.com/css?family=Merriweather+Sans:700,400");
@import url("http://fonts.googleapis.com/css?family=Source+Code+Pro");

// colors
cyan_light = #0FB3BF
cyan_dark = #0B96A0
orange_light = #EE7D5F
orange_dark = #B76751
grey_light = #929086
grey_dark = #453726

grey_thin1 = #CFCCC4
grey_thin2 = #DCD9D4
grey_thin3 = #EEEDEB

// const
aside_width = 210px

// font family
global_serif = Merriweather, serif
global_sans = "Merriweather Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif
global_mono = "Source Code Pro", "Monaco", "Courier New", monospace

body
  color grey_dark
  font-size 14px
  font-family global_sans
  overflow hidden

header
  clearfix()
  color white
  background cyan_light
  height 60px
  border-bottom 3px solid cyan_dark
  min-width 920px
  a
    color white
    text-decoration none
    text-shadow 1px 1px 1px rgba(0,0,0,.2)
  .app-title
    width aside_width
    border-right 1px solid cyan_dark
    text-align center
    float left
    a
      display block
      font-weight 700
      font-family global_serif
      font-size 24px
      padding-top 2px
      line-height 58px
  .app-menu
    float left
    list-style none
    padding 0
    margin 0
    li
      float left
      border-right 1px solid cyan_dark
      background none
      transition background 0.3s
      a
        font-family global_serif
        font-weight 300
        display block
        font-size 16px
        line-height 25px
        padding 20px 20px 15px
        span
          margin-right 6px
      &.active
        background cyan_dark
      &:hover
        transition background 0.3s
        background cyan_dark
  .app-search
    float right
    margin 12px 20px
    background cyan_dark
    padding 3px
    input
      width 190px
      background #EEEDEB
      transition background 0.3s
      height 16px
      line-height 16px
      padding 7px 5px
      border none
      &:focus
        transition background 0.3s
        background white

.container
  aside
    float left
    width aside_width
    background grey_thin3
    border-right 1px solid grey_thin1
    overflow-x hidden
    overflow-y auto
    &::-webkit-scrollbar
      width 3px
    &::-webkit-scrollbar-track
      background grey_thin3
    &::-webkit-scrollbar-thumb
      background grey_thin1
    a
      color grey_dark
      text-decoration none
      &:hover
        color orange_dark
    .group
      margin 20px 15px
      font-size 12px
      .group-label
        border-bottom 1px solid grey_thin2
        color grey_light
        padding 3px 0
        span
          margin-right 6px
      .group-list
        padding 8px 0
        margin 0
        margin-left 1em
        list-style none
        li
          padding 1px 0
          span.count
            padding-left 5px
            font-size 12px
            color grey_light
            font-family global_mono
          &.active .tag-name
            font-weight 700
            color orange_dark

  .main
    float right
    text-align center
    overflow auto
    h1, h2, h3, h4, h5, h6
      margin 1em 0 0.6em
    h1, h2, h3
      font-weight 300
      font-family global_serif
    h1
      font-size 30px
    h2
      font-size 24px
    h3
      font-size 18px
    h4
      font-size 16px
    h5
      font-size 14px
      font-weight 700
    hr
      border-width 0 0 1px 0
      border-style solid
      border-color grey_thin3
    a
      color cyan_dark
      text-decoration none
      &:hover
        color orange_dark
    strong
      color orange_dark
      font-weight 300
    em
      color grey_dark
    code
      font-family global_mono
      color grey_light
      padding 0 .4em
    pre
      background grey_thin3
      padding 20px
      line-height 1.6em
      code
        padding 0
        color grey_dark

    .content
      text-align left
      padding 20px 30px
      width 720px
      .crumb
        color grey_light
      .level
        .level-item
          clearfix()
          dt,
          dd,
          dd p
            padding 0
            margin 0
          dt
            float left
            width 50px
            color orange_dark
          dd
            float left
            width 670px
      .tag-info,
      .point-info
        padding 10px 0 20px
      .links
        margin 10px 0
        clearfix()
        .button
          margin-right 15px
      .relevance
        dt
          font-size 16px
          font-weight 300
          span
            color grey_light
            margin-right 0.5em
          &.unknown
            color grey_light
            em
              font-size 12px
              margin-left 0.6em
              color grey_thin1
        dd
          margin 0 0 0 1.5em
          p
            margin 0.6em 0
      .point-tags
        .point-tag
          margin 5px 0
          span
            color grey_light
            margin-right 0.5em
          em
            color grey_light
          .point-tag-title
            margin-right 1em
    .article
      h1
        padding-bottom 0.5em
        border-bottom 1px solid grey_thin3
    .app-info
      clearfix()
      margin-top 40px
      border-top 1px solid grey_thin3
      color grey_light
      font-size 12px

  a.button
    float left
    display block
    height 21px
    line-height 21px
    background cyan_light
    border-bottom 3px solid cyan_dark
    color white
    border-radius 5px
    padding 2px 10px
    cursor pointer
    &:hover
      color white
      opacity .8
    &:active
      background cyan_dark
      opacity 1
      border-bottom none
      line-height 24px
      height 24px
    span
      margin-right 5px